<template>
  <div class="container">
    <span>{{year}}年{{month}}月{{date}}日</span>
    <span>{{week}}</span>
    <span>{{hours}}:{{minutes<10?'0'+minutes:minutes}}:{{seconds<10?'0'+seconds:seconds}}</span>
    <span>多云</span>
  </div>
</template>

<script>
export default {
  // 全局感知
  name: "ScreenDate",
  data() {
    return {
      year: 2018,
      month: 12,
      date: 12,
      week: "星期一",
      hours: 12,
      minutes: 12,
      seconds: 12,
      weekList: [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ],
      interval: null
    };
  },
  computed: {},
  // 事件
  watch: {},
  mounted() {
    this.initDate();
    this.interval = setInterval(this.initDate, 1000);
  },
  beforeDestroy() {
    this.interval = window.clearInterval(this.interval);
  },
  // 非响应式的属性
  methods: {
    initDate() {
      let myDate = new Date();
      this.year = myDate.getFullYear();
      this.month = myDate.getMonth() + 1;
      this.date = myDate.getDate();
      this.week = this.weekList[myDate.getDay()];
      this.hours = myDate.getHours();
      this.minutes = myDate.getMinutes();
      this.seconds = myDate.getSeconds();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding-right: 5vw;
  width: 40vw;
  height: 10vh;
  text-align: right;
  box-sizing: border-box;
  span {
    line-height: 8vh;
    margin-right: 1.5rem;
    font-size: 2.5rem;
    color: white;
  }
}
</style>
